<template>
  <div>
    <div id="PieChart2" />
  </div>
</template>

<script lang="ts">
import { Component } from "vue-property-decorator";
// lib
import * as echarts from "echarts";
// components & widgets
import ResizeChartVm from "@/public/base/ResizeChartVm";
import { openOption } from "../../../http/model";
import { show } from "../../../http/core";
// config
// script & public
// controller & service
// interface
// 其它

@Component
export default class LineChart extends ResizeChartVm {
  mounted() {
    this.initChart();
  }
  initChart() {
    const el = document.getElementById("PieChart2");
    if (!el) {
      this.$message.error("没有图表挂载点");
      return;
    }
    this.chartE = echarts.init(el);

    const options: echarts.EChartsOption = {
      title: {
        text: "某站点用户访问来源",
        subtext: "纯属虚构",
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "left",
      },
      series: [
        {
          name: "访问来源",
          type: "pie",
          radius: "50%",
          roseType: "radius",
          right: "-10%",
          data: [
            {
              value: 1048,
              name: "搜索引擎",
              itemStyle: {
                color: "black",
              },
              emphasis: {
                itemStyle: {
                  color: "red",
                },
              },
            },
            { value: 735, name: "直接访问" },
            { value: 580, name: "邮件营销" },
            { value: 484, name: "联盟广告" },
            { value: 300, name: "视频广告" },
          ],
          emphasis: {
            scaleSize: 20,
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
    this.chartE.setOption(options);
  }
}
</script>

<style scoped lang="scss">
#PieChart2 {
  width: 50%;
  height: 300px;
}
</style>
